<template>
    <div class="singleFlight">
        <div class="OrderFome_number">
            <!-- <div id="maindatat" :style="{ height: height + 'px' }" :key="qualityway"></div> -->
            <!--   -->
            <div id="maindatat" style="width: 100%; height: 500px;"></div>
        </div>
    </div>
</template>

<script>
    import { reqMyMessagesList, reqMyMessagesDetail } from "@/api/message";
    import china from "@/assets/china/china.js";
    import { getChartData } from "@/api/echarts";
    export default {
        name: 'message',
        components: {},
        props: {
            "option": {

            },
            "id": {},
            'height': {
                default() {
                    return '300';
                },
            }
        },
        data() {
            return {
                chartData: []

            };
        },
        mounted() {
            getChartData(
                { "custom_chart_id": "24" }
            ).then(res => {
                const halfIndex = Math.ceil(res.data.data.length)
                this.chartData = res.data.data.slice(0, halfIndex);
                this.initdatat()
            });
        },
        methods: {
            initdatat() {
                var planePath =
                    'path://M1705.06,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705.06,1318.313z'
                var mapChart = this.$echarts.init(document.getElementById("maindatat"));
                mapChart.on('click', (params) => {
                    var id = params.data.waybill_id
                    if (params.data.waybill_id != '') {
                        let text = this.$router.resolve({
                            name: "waybillDetail",
                            query: { id },
                        });
                        window.open(text.href, "_blank");
                    }


                })
                let resultArray = [];
                let endArry = []
                this.chartData.map((array) => {
                    resultArray.push(array[0])
                    endArry.push(array[1])
                })
                const coords = this.chartData
                // const lines_coord = this.transformCoordinates(this.chartData)
                const lines_coord = this.chartData
                mapChart.setOption({
                    tooltip: {
                        trigger: 'item',
                        showContent: true,//是否显示提示框浮层，默认显示
                        alwaysShowContent: false,//是否永远显示提示框内容，默认情况下在移出可触发提示框区域后 一定时间 后隐藏，设置为 true 可以保证一直显示提示框内容
                        hideDelay: 0,//鼠标移出坐标点时，浮层隐藏的延迟时间，单位为 ms，在 alwaysShowContent 为 true 的时候无效
                        formatter: function (params, ticket, callback) {
                            return params.data.waybill_no + ""
                        }
                    },
                    geo: {
                        name: '地图',
                        type: 'map',  //地图种类、
                        map: 'china', //地图类型。
                        zlevel: 0,
                        show: true,
                        layoutCenter: ['50%', '65%'],
                        roam: false,
                        layoutSize: "90%",
                        zoom: 1.6,
                        roam: true, // 滚轮滚动--放大或缩小

                        label: {
                            normal: {
                                show: false,
                                position: 'middle', // 标签位置
                                textStyle: {
                                    fontSize: 14,
                                    // 文字顔色
                                    color: '#43D0D6'
                                }
                            }
                        },
                        itemStyle: { //地图区域的多边形 图形样式。
                            emphasis: { //高亮状态下的样试
                                label: {
                                    show: true,
                                },
                                areaColor: '#FFFFFF',
                            },
                            normal: {
                                areaColor: '#1b579c',
                                borderWidth: 1,//设置外层边框
                                borderColor: '#1ECEF4',
                            }
                        },
                    },
                    series: [
                        {
                            // effectScatter画散点【起点】
                            type: 'effectScatter',
                            coordinateSystem: 'geo',
                            zlevel: 2,
                            symbolSize: 0,
                            rippleEffect: {
                                period: 3, brushType: 'stroke', scale: 3
                            },
                            itemStyle: {
                                color: '#FFB800',
                                opacity: 0.7
                            },
                            data: resultArray.slice(2)
                        },
                        {
                            // 画中心散点【终点】,这里是为了区分起点终点不同样式，所以分开写，如果二者样式一样那就直接合在一起写就好了
                            type: 'effectScatter',
                            coordinateSystem: 'geo',
                            zlevel: 2,
                            // symbol: 'pin', // 设置起点的标记样式为图钉（也可以是其他形状）
                            symbolSize: 0,
                            rippleEffect: {
                                period: 4, brushType: 'stroke', scale: 4
                            },
                            itemStyle: {
                                color: '#FF5722',
                                opacity: 1
                            },
                            data: endArry.slice(2)
                        },
                        {
                            // // lines画线
                            type: 'lines',
                            coordinateSystem: 'geo',
                            zlevel: 2,
                            symbol: ['none', 'arrow'],//设置飞线的起点终点处的绘制图形
                            symbolSize: 12,

                            effect: {
                                show: true,
                                period: 5, //箭头指向速度，值越小速度越快
                                trailLength: 0, //特效尾迹长度[0,1]值越大，尾迹越长重
                                symbol: planePath, //飞机图标
                                symbolSize: 10, //图标大小
                                color: '#E2F61C'
                            },
                            itemStyle: {
                                normal: {
                                    borderWidth: 1,
                                }
                            },
                            lineStyle: { //飞线的样式
                                normal: { width: 1.2, opacity: 0.6, curveness: 0.2, color: '#FFB800' }
                            },
                            data: lines_coord

                        }
                    ],
                })
            },
            transformCoordinates(inputData) {
                let transformedData = [];
                inputData.forEach(item => {
                    // let coords = item;
                    // let transformedItem = { coords };
                    // transformedData.push(transformedItem);
                });
                return transformedData;
            }
        },
    };
</script>
<style lang="scss" scoped>
    .singleFlight {}
</style>